<section id="counters" class="space-x-24 flex">
  <ng-container #counter1Container [ngTemplateOutlet]="counter1"></ng-container>
  <app-counter #counter2 [id]="2" [count]="count"></app-counter>
</section>

<ng-template #counter1>
  <app-counter #counter1 [id]="1" [count]="count"></app-counter>
</ng-template>

<div class="btn-group mt-6">
  <button
    title="Decrement"
    type="button"
    class="btn btn-warning"
    (click)="decrement()"
  >
    <app-minus-outline></app-minus-outline>
  </button>
  <button
    title="Increment"
    type="button"
    class="btn btn-info"
    (click)="increment()"
  >
    <app-plus-outline></app-plus-outline>
  </button>
</div>

<div class="btn-group mt-6">
  <button type="button" class="btn" (click)="removeViaDOM()">
    Remove via DOM
  </button>
  <button type="button" class="btn btn-error" (click)="removeViaVCR()">
    Remove via VCR
  </button>
</div>
